/**
 * 生成html的核心js函数
 */
let globalConfig;

export function vueTemplate(str) {
  return `<template>
    <div>
      ${str}
    </div>
  </template>`;
}

export function vueScript(str) {
  return `<script>
    ${str}
  </script>`;
}

export function cssStyle(cssStr) {
  return `<style>
    ${cssStr}
  </style>`;
}

const items = {
  input: (el) => {
    const { disabled, vModel, clearable, placeholder, width } = attrBuilder(el);
    const maxlength = el.maxlength ? `:maxlength="${el.maxlength}"` : "";
    //const showWordLimit = el['show-word-limit'] ? 'show-word-limit' : ''
    const readonly = el.readonly ? "readonly" : "";
    return `<${el.ele} ${vModel} ${placeholder} ${maxlength} ${readonly} ${disabled} ${clearable} />`;
  },
  textarea: (el) => {
    const { disabled, vModel, clearable, placeholder, width } = attrBuilder(el);
    const maxlength = el.maxlength ? `:maxlength="${el.maxlength}"` : "";
    //const showWordLimit = el['show-word-limit'] ? 'show-word-limit' : ''
    const readonly = el.readonly ? "readonly" : "";
    const type = el.type ? `type="${el.type}"` : "";
    return `<${el.ele} ${vModel} ${type} ${placeholder} ${maxlength} ${readonly} ${disabled} ${clearable} />`;
  },
};

function colWrapper(element, str) {
  if (element.span) {
    return `<el-col :span="${element.span}">
              ${str}
            </el-col>`;
  }
  return str;
}

function attrBuilder(el) {
  return {
    vModel: `v-model="${globalConfig.formModel}.${el.id}"`,
    clearable: el.clearable ? "clearable" : "",
    placeholder: el.placeholder ? `placeholder="${el.placeholder}"` : "",
    //width: el.style && el.style.width ? ':style="{width: \'100%\'}"' : '',
    disabled: el.disabled ? ":disabled='true'" : "",
  };
}

const layout = {
  colFormItem(element) {
    let labelWidth = `label-width="${globalConfig.labelWidth}px"`;
    let label = `label="${element.label}"`;
    if (element.labelWidth && element.labelWidth !== globalConfig.labelWidth) {
      labelWidth = `label-width="${element.labelWidth}px"`;
    }
    if (element.showLabel === false) {
      labelWidth = 'label-width="0"';
      label = "";
    }
    const required = element.required ? "required" : "";
    const itemDom = items[element.compType]
      ? items[element.compType](element)
      : null;
    let str = `<el-form-item ${labelWidth} ${label} ${required}>
                ${itemDom}
               </el-form-item>`;
    str = colWrapper(element, str);
    return str;
  },
};

/**
 * 生成html源码
 * 表单配置和组件列表
 */
export function buildHtmlSource(itemList, formConf) {
  globalConfig = formConf;
  const htmlCode = [];
  itemList.forEach((el) => {
    htmlCode.push(layout["colFormItem"](el));
  });
  const htmlStr = htmlCode.join("\n");
  //console.log(htmlStr)
}
